<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .hide {
            display: none;
        }
        .add-modal,.edit-modal,.del-modal {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: -225px;
            width: 450px;
            height: 300px;
            background-color: white;
            z-index: 10;
        }
    </style>
</head>
<body>
    <h1>业务线列表(对象)</h1>
    <div>
        <input id="add_host" type="button" value="添加">
    </div>
    <div class="shadow hide"></div>
    <table id="data_tb" border="1">
        <thead>
        <tr>
            <th>序号</th>
            <th>主机名</th>
            <th>IP</th>
            <th>端口</th>
            <th>业务线</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for row in v %}
        <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
            <td>{{ forloop.counter }}</td>
            <td>{{ row.hostname }}</td>
            <td>{{ row.ip }}</td>
            <td>{{ row.port }}</td>
            <td>{{ row.b.caption }}</td>
            <td>
                <a class="edit_host">编辑</a> |
                <a class="del_host">删除</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="add-modal hide">
        <form id="add_h" action="/host/" method="post">
        <div>
            <input type="text" name="hostname" placeholder="主机名">
        </div>
        <div>
            <input type="text" name="ip" placeholder="IP">
        </div>
        <div>
            <input type="text" name="port" placeholder="端口">
        </div>
        <div>
            <select name="b_id">
                {% for row in v2 %}
                    <option value="{{ row.id }}">{{ row.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <input type="submit" id="confirmModal" value="确认">
            <a href="#" id="test_ajax">ajax发送</a>
            <input type="button" class="cancelModal" value="取消">
            <span id="err_msg"></span>
        </div>
        </form>
    </div>

    <div class="edit-modal hide">
        <form id="edit_h">
        <div>
            <input type="hidden" name="hid">
            <input type="text" name="hostname" placeholder="主机名">
        </div>
        <div>
            <input type="text" name="ip" placeholder="IP">
        </div>
        <div>
            <input type="text" name="port" placeholder="端口">
        </div>
        <div>
            <select name="b_id">
                {% for row in v2 %}
                    <option value="{{ row.id }}">{{ row.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
{#            <input type="submit" id="confirmModal" value="确认">#}
            <a id="test_ajax_edit">ajax编辑</a>
            <input type="button" class="cancelModal" value="取消">
            <span id="err_msg_edit" style="color: red;"></span>
        </div>
        </form>
    </div>
    <div id="del_h" class="del-modal hide">
        <h3>确认要删除吗？</h3>
        <input type="hidden" name="hid_del">
        <input id="confirmDel" type="button" value="确认">
        <input class="cancelModal" type="button" value="取消">
        <span id="err_msg_del" style="color: red;"></span>
    </div>

<script src="/static/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('#add_host').click(function () {
            $('.shadow,.add-modal').removeClass('hide')
        })
        $('.edit_host').click(function () {
            $('.shadow,.edit-modal').removeClass('hide');
            var bid = $(this).parent().parent().attr('bid');
            var hid = $(this).parent().parent().attr('hid');
            var hostname = $(this).parent().parent().find('td:eq(1)').text();
            var ip = $(this).parent().parent().find('td:eq(2)').text();
            var port = $(this).parent().parent().find('td:eq(3)').text();
            var sel = $(this).parent().parent().find('td:eq(4)').text();
            {#var ip = $(this).parent().parent().val();#}
            {#console.log(hostname)#}
            var $div =$('#edit_h');
            $div.find('select').val(bid);
            $div.find('input[name="hid"]').val(hid);
            $div.find('input[name="hostname"]').val(hostname);
            $div.find('input[name="ip"]').val(ip);
            $div.find('input[name="port"]').val(port);

        })
        $('.del_host').click(function () {
            $('.shadow,.del-modal').removeClass('hide');
            var hid = $(this).parent().parent().attr('hid');
            $('#del_h').find('input[name="hid_del"]').val(hid);
        })
        $('.cancelModal').click(function () {
            $('.shadow,.add-modal,.edit-modal,.del-modal').addClass('hide');
            $('#err_msg_edit,#err_msg').text('');
        })
        $('#test_ajax').click(function () {
            $.ajax({
                url:"/test_ajax/",
                type: "POST",
                data: $('#add_h').serialize(),
                success: function (data) {
                    var obj=JSON.parse(data);
                    if(obj.status){
                        location.reload();
                    }else {
                        $('#err_msg').text(obj.err);
                    }
                }

        })
        })
        $('#test_ajax_edit').click(function () {
            $.ajax({
                url: "/test_ajax_edit/",
                type: "POST",
                data: $('#edit_h').serialize(),
                success: function (data) {
                    var obj=JSON.parse(data);
                    if(obj.status){
                        location.reload()
                    }else {
                        $('#err_msg_edit').text(obj.err);
                    }
                }
            })
        })
        $('#confirmDel').click(function () {
            var hid_2 = $(this).siblings('input:eq(0)').val();
            $('#data_tb').find('tr[hid='+hid_2+']').remove()
            $('.shadow,.del-modal').addClass('hide');
            $.ajax({
                url: "/del_host/",
                type: "POST",
                data: {'hid':hid_2},
                success: function (data) {
                    var ret = JSON.parse(data)
                    if(!ret.status){
                        $('#err_msg_del').text(ret.err_msg)
                    }
                }
            })
        })
    })
</script>
</body>
</html>